<template>
    <view class="home">
        <!-- Logo区域 -->
        <view class="logo">
            <image :src="hotelInfo.logo" mode="aspectFit"></image>
        </view>

        <!-- 民宿名称 -->
        <view class="hotel-name">{{ hotelInfo.name }}</view>

        <!-- 地址和电话 -->
        <view class="info">
            <view class="info-item address">
                <text>地址：{{ hotelInfo.address }}</text>
                <image src="/static/icons/nav.png" @tap="handleNavigation"></image>
            </view>
            <view class="info-item phone">
                <text>电话：{{ hotelInfo.phone }}</text>
                <image src="/static/icons/phone.png" @tap="handleCall"></image>
            </view>
        </view>

        <!-- 轮播图区域 -->
        <view class="banner-container">
            <swiper class="banner" circular autoplay interval="3000" duration="500" @change="handleSwiperChange">
                <swiper-item v-for="(item, index) in bannerList" :key="index">
                    <image :src="item" mode="aspectFill"></image>
                </swiper-item>

                <!-- 轮播图指示点 -->
                <view class="dots">
                    <view class="dot" v-for="(item, index) in bannerList" :key="index"
                        :class="{ 'active': currentSwiper === index }"></view>
                </view>
            </swiper>
        </view>
    </view>
</template>

<script>
import { homeApi } from '@/api'
export default {
    data() {
        return {
            hotelInfo: {
                name: '临海荣舍民宿',
                address: '浙江省台州市临海古城街道东郊巷80号',
                phone: '18969698907',
                logo: '/static/logo.jpg',
                lon: 121.13,
                lat: 28.85
            },
            bannerList: [
                '/static/banner/banner1.jpg',
                '/static/banner/banner2.jpg',
                '/static/banner/banner3.jpg',
                '/static/banner/banner4.jpg'
            ],
            currentSwiper: 0
        }
    },
    onShow() {
        this.getHotelInfo()
    },
    methods: {
        // 处理导航
        handleNavigation() {
            const latitude = this.hotelInfo.lat  // 纬度121.13,28.85
            const longitude = this.hotelInfo.lon // 经度

            uni.openLocation({
                latitude: latitude,
                longitude: longitude,
                name: this.hotelInfo.name,
                address: this.hotelInfo.address,
                success: function () {
                }
            })
        },
        // 处理电话
        handleCall() {
            uni.makePhoneCall({
                phoneNumber: this.hotelInfo.phone
            })
        },
        // 轮播图切换
        handleSwiperChange(e) {
            this.currentSwiper = e.detail.current
        },
        // 获取民宿信息
        getHotelInfo() {
            homeApi.getHotelInfo("1").then(res => {
                this.hotelInfo = res.data
                this.hotelInfo.logo = this.$baseUrl + res.data.logo
                this.getBannerList()
            })
        },
        // 获取轮播图列表
        getBannerList() {
            homeApi.getBannerList({
                categoryId: 1
            }).then(res => {
                this.bannerList = []
                res.data.forEach(item => {
                    this.bannerList.push(this.$baseUrl + item.imageUrl)
                })
            })
        }
    }
}
</script>

<style lang="scss">
.home {
    height: 100vh;
    background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .logo {
        width: 100%;
        height: 50vh;
        margin: 0 auto;
        margin-top: 44rpx;
        padding: 0 60rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    .hotel-name {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        text-align: left;
        margin-left: 20rpx;
        margin-bottom: 40rpx;
    }

    .info {

        .info-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20rpx;
            padding: 20rpx;
            background-color: #f8f8f8;
            border-radius: 10rpx;

            text {
                font-size: 28rpx;
                color: #333;
                flex: 1;
            }

            image {
                width: 40rpx;
                height: 40rpx;
                margin-left: 20rpx;
            }
        }
    }

    .banner-container {
        position: relative;
        width: 100%;
        flex: 1;
        min-height: 400rpx;
        border-radius: 20rpx;
        overflow: hidden;
        margin-top: auto;

        .banner {
            width: 100%;
            height: 100%;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .dots {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20rpx;
            display: flex;
            justify-content: center;
            z-index: 1;

            .dot {
                width: 12rpx;
                height: 12rpx;
                border-radius: 50%;
                background-color: rgba(255, 255, 255, 0.5);
                margin: 0 8rpx;
                transition: all 0.3s;

                &.active {
                    width: 24rpx;
                    border-radius: 6rpx;
                    background-color: #fff;
                }
            }
        }
    }
}
</style>